<template>
	<view class='vip-wrapper'>
		<view class="title">{{title}}</view>
		<view class="price">
			<span>{{price}}</span>
		</view>
		<view class="rmb-price" v-if="vipRate!==''">
			<span class="rate">{{vipRate[currentVip].name||''}}{{vipRate[currentVip].rate|rateTen}}折</span>
			<span>¥{{priceRMB}}</span>
		</view>
		<div style="margin: 40upx 0 100upx;" v-if="text">
			<u-parse
			  :lazy-load="true"
			  :use-cache="true"
			  :show-with-animation="true"
			  :html="text"
			></u-parse>
		</div>
		<u-button
			:customStyle="{'margin-top':'20px','background':'linear-gradient(162.65deg, rgba(255, 98, 0, 1) 0%, rgba(240, 139, 67, 0.65) 100%)','color':'#fff','border-radius': '23px' }"
			@click="handlerRechargeVip">立即支付</u-button>
		<pay-methods finish="refresh" closeTip='1' type="RECHARGE" @payFinish="payFinish" ref="payMethods">
		</pay-methods>
	</view>
</template>
<script>
	import {
		Recharge,
		RateSetting,
		CreatePartner,
		getUserInfo,
		VIPRateSetting
	} from "@/api/members";
	import BigNumber from 'bignumber.js'
	import storage from "@/utils/storage.js";
	import config from '@/config/config'
	import payMethods from "@/components/pay-methods/pay-methods.vue"
	import * as API_Trade from "@/api/trade";
	export default {
		data() {
			return {
				text: '',
				// 授权信息展示，商城名称
				projectName: config.name,
				title: '',
				price: '',
				priceRMB: 0,
				currentVip: '', //是否是充值会员
				vipRate: '',
				rate: ''
			};
		},
		components: {
			payMethods
		},
		async onLoad(options) {
			this.currentVip = options.vip || ''
			this.userInfo = this.$options.filters.isLogin();
			await this.initHL()
			this.rechargeType = '4'
			this.orderType = options.orderType || ''
			if (this.currentVip == '1') {
				this.rechargeType = '43'
			}
			if (this.currentVip == '2') {
				this.rechargeType = '44'
			}
			//初始化参数
			// #ifdef APP-PLUS
			this.paymentType = "APP";
			this.paymentClient = "APP";
			//#endif
			// #ifdef MP-WEIXIN
			this.paymentType = "WECHAT_MP";
			this.paymentClient = "MP";
			//#endif
			// #ifdef H5
			this.paymentType = "H5";
			//如果是微信浏览器，则使用公众号支付，否则使用h5，
			// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
			this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
			//#endif
		},
		methods: {
			initHL() {
				VIPRateSetting().then((res) => {
					let result = res.data.result
					let params = {}
					for (let i = 0; i < result.length; i++) {
						if (this.currentVip === result[i].level) {
							this.text = result[i].description
						}
						params[result[i].level] = {
							rate: result[i].rechargeRule,
							name: result[i].name,
							money: result[i].money,
							content: result[i].content,
							
						}
					}
					storage.setVipRate(params);
					this.vipRate = params
					this.title = this.vipRate[this.currentVip].name
					this.rate = this.vipRate[this.currentVip].rate
					this.setPrice(this.vipRate[this.currentVip].money)
				})
			},
			setPrice(price) {
				this.price = price + ''
				this.priceRMB = new BigNumber(price).multipliedBy(this.rate).dp(2, BigNumber.ROUND_DOWN).toNumber()
			},
			// 充值
			handlerRechargeVip() {
				let that = this
				let params = {
					rechargeType: this.rechargeType,
					price: this.priceRMB,
					hbPrice: this.price,
				}
				if (this.currentVip) {
					params.vipPrice = this.vipRate[this.currentVip].money
				}
				this.$refs.payMethods.payChoose('wechat', params)
			},
			// 充值成功回调
			payFinish(params) {
				this.initHL()
				this.initUserInfo()
				uni.navigateTo({
					url: "/pages/cart/payment/success?" +
						"paymentMethod=" + params.paymentMethod +
						"&payPrice=" + params.payPrice +
						"&orderType=" + params.orderType
				});
			},
			// 获取个人信息
			initUserInfo() {
				//获取用户信息
				getUserInfo().then((user) => {
					if (user.data.code === 200) {
						this.userInfo = user.data.result
						storage.setUserInfo(user.data.result);
					} else {
						this.userInfo = {}
						storage.removeUserInfo()
						storage.setHasLogin(false)
					}
					if (this.$refs.tools) {
						this.$refs.tools.init()
					}
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.vip-wrapper {
		padding: 32upx;
		min-height: 100vh;
		background-color: #ffffff;

		.title {
			color: rgba(175, 130, 60, 1);
			font-size: 32upx;
			font-weight: 700;
		}

		.price {
			margin-top: 32upx;
			font-size: 72upx;
			font-weight: 700;
			border-bottom: 1px solid rgb(166, 166, 166);
		}

		.rmb-price {
			margin-top: 16upx;
			display: flex;
			color: rgba(166, 166, 166, 1);

			.rate {
				margin-right: 36upx;
			}
		}

		.tip-wrapper {
			margin: 40upx 0 60upx;
		}

		.button {}
	}
</style>
